import './App.css'

import avatar from './assets/images/avatar.png'

function App() {
  return (
    <div className="App">
      <div className="comment-container">
        {/* 评论数 */}
        <div className="comment-head">
          <span>28 评论</span>
        </div>

        {/* 排序 */}
        <div className="tabs-order">
          <ul className="sort-container">
            <li data-sort="1" className="on">
              按热度排序
            </li>
            <li data-sort="2">按时间排序</li>
          </ul>
        </div>

        {/* 发表评论 */}
        <div className="comment-send">
          <div className="user-face">
            <img className="user-head" src={avatar} alt="" />
          </div>
          <div className="textarea-container">
            <textarea
              cols="80"
              rows="5"
              placeholder="发条友善的评论"
              className="ipt-txt"
            ></textarea>
            <button type="submit" className="comment-submit">
              发表评论
            </button>
          </div>
          <div className="comment-emoji">
            <i className="face"></i>
            <span className="text">表情</span>
          </div>
        </div>

        {/* 列表 */}
        <div className="comment-list">
          {/* 列表项 */}
          <div className="list-item">
            <div className="user-face">
              <img className="user-head" src={avatar} alt="" />
            </div>
            <div className="comment">
              <div className="user">张三</div>
              <p className="text">确认过眼神，是心动的声音[微笑]</p>
              <div className="info">
                <span className="time">2020-07-08 23:40</span>
                <span className="like liked">
                  <i className="icon" />
                  <span>1</span>
                </span>
                <span className="hate hated">
                  <i className="icon" />
                </span>
                <span className="reply btn-hover">回复</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App
